<template>
	<view>
		<navbar :back="true" :title="detail.name" color="#000" leftIconColor="#000" bgColor="#fff" />
		<view style="position: relative;">
			<mswiper :list="detail.images" height="440rpx" :nextMargin="0" :previousMargin="0" :radius="0" />
			<view style="width: 100%;height: 440rpx;position: absolute;top: 0;left: 0;">
				<sinBarrage :list="detail.notifyList" :bottom="bottom" :left="left" :color="color" :background="background" :opacity="1" :rows="3" :msec="msec"></sinBarrage>
			</view>
			<view style="background-color: #fff;padding: 20rpx;margin-bottom: 20rpx;">
				<view style="font-weight: 700;;width: 100%;word-wrap:break-word;margin-bottom: 10rpx;">{{detail.name}}
				</view>
				<view
					style="display: flex;justify-content: space-between;align-items: center;padding-bottom: 20rpx;border-bottom: 2rpx solid #eeeeee;">
					<view class="">
						<view style="font-size: 26rpx;margin: 10rpx 0;color:#787878">主讲人 : {{detail.realName}}</view>
						<view style="font-size: 26rpx;color: #787878;">主办方 : {{detail.businessName}}</view>
					</view>
					<view style="display: flex;align-items: center;">
						<!-- <view v-if="coll" @click="cancelCollection()" style="text-align: center;margin:0 40rpx;">
						 	<u-icon name="star-fill" color="red" size="24"></u-icon>
						 	<view style="font-size: 22rpx;color: #9a9a9a;">已收藏</view>
						 </view>
						 <view v-else  @click="collection()" style="text-align: center;margin:0 40rpx;">
						 	<u-icon name="star" color="red" size="24"></u-icon>	
						 	<view style="font-size: 22rpx;color: #9a9a9a;">收藏</view>
						 </view> -->
						<view v-if="coll" @click="cancelCollection()" style="width: 80rpx;text-align: center;">
							<u-icon name="star-fill" color="red" size="24" label='已收藏' labelPos='bottom' labelSize='11'
								labelColor='#9a9a9a'></u-icon>
						</view>
						<view v-else @click="collection()" style="width: 80rpx;text-align: center;">
							<u-icon name="star" color="##9a9a9a" size="24" label='收藏' labelPos='bottom' labelSize='11'
								labelColor='#9a9a9a'></u-icon>
						</view>
						<button open-type="share">
							<u-icon name="weixin-circle-fill" color="rgba(8, 196, 8, 1)" size="24" label='邀请报名'
								labelPos='bottom' labelSize='11' labelColor='#9a9a9a' />
						</button>
					</view>
				</view>
				<view style="padding-top: 20rpx;">
					<view style="display: flex;align-items: center;">
						<u-icon name="clock" color="#9d9d9d" size="18"></u-icon>
						<view style="font-size: 26rpx;color: #9d9d9d;margin-left: 10rpx;">{{detail.beginTime}}</view>
						<view style="font-size: 26rpx;color: #9d9d9d;margin:0 10rpx;">至</view>
						<view style="font-size: 26rpx;color: #9d9d9d;">{{detail.endTime}}</view>
					</view>
					<view style="margin-top: 20rpx;display: flex;align-items: center;" @click="openMap(detail)">
						<u-icon name="map" color="#9d9d9d" size="18"></u-icon>
						<view style="font-size: 26rpx;color: #9d9d9d;margin-left: 10rpx;">
							{{detail.city+detail.district+detail.address}}
						</view>
					</view>
				</view>
			</view>
			
			<view style="background-color: #fff;padding: 20rpx;">
				<view
					style="display: flex;justify-content: space-between;align-items: center;color: #3e3e3e;font-size: 28rpx;padding-bottom: 20rpx;border-bottom: 2rpx solid #eeeeee;">
					<view class="">可报名人数 : {{detail.people}}</view>
					<view class="">当前报名人数 : {{detail.makeNum}}</view>
					<view class="">行业 : {{detail.childIndustryName}}</view>
				</view>
				<view>
					<view v-if="drShow"
						style="display: flex;justify-content: space-between;align-items: center;margin-top: 40rpx;">
						<image
							src="https://cdn.yowswl.com/image/admin/2023/11/08/77a855120ead421db2bc71b381bfb5006ul78w77je.png"
							mode="" style="width: 160rpx;height: 50rpx;"></image>
						<view style="width: 380rpx;">
							<u-line-progress :percentage="detail.drRatio" :showText="false" activeColor='#d8b175'
								height='9'></u-line-progress>
						</view>
						<view style="font-size: 24rpx;text-align: center;margin:10rpx;color: #d8b175;width: 140rpx;">
							{{detail.drMakeNum}} / {{detail.drPeople}}
						</view>
					</view>
					<view v-if="tzShow"
						style="display: flex;justify-content: space-between;align-items: center;margin-top: 40rpx;">
						<image
							src="https://cdn.yowswl.com/image/admin/2023/11/08/b532070d29b54ac28cb0e51b590438babxf70o2rm4.png"
							mode="" style="width: 160rpx;height: 50rpx;"></image>
						<view style="width: 380rpx;">
							<u-line-progress :percentage="detail.tzRatio" :showText="false" activeColor='#a2b1c5'
								height='9'></u-line-progress>
						</view>
						<view style="font-size: 24rpx;text-align: center;margin:10rpx;color: #a2b1c5;width: 140rpx;">
							{{detail.tzMakeNum}} / {{detail.tzPeople}}
						</view>
					</view>
					<view v-if="sjShow"
						style="display: flex;justify-content: space-between;align-items: center;margin-top: 40rpx;">
						<image
							src="https://cdn.yowswl.com/image/admin/2023/11/08/2219a676dacd4c7f8000c49335f4431cyvydmv75k0.png"
							mode="" style="width: 160rpx;height: 50rpx;"></image>
						<view style="width: 380rpx;">
							<u-line-progress :percentage="detail.sjRatio" :showText="false" activeColor='#f9c336'
								height='9'></u-line-progress>
						</view>
						<view style="font-size: 24rpx;text-align: center;margin:10rpx;color:#f9c336;width: 140rpx;">
							{{detail.sjMakeNum}} / {{detail.sjPeople}}
						</view>
					</view>
					<view v-if="jgShow"
						style="display: flex;justify-content: space-between;align-items: center;margin-top: 40rpx;">
						<image
							src="https://cdn.yowswl.com/image/admin/2023/11/08/aa5ffabb40a244be9963d30b04297ce00t579tpmhn.png"
							mode="" style="width: 160rpx;height: 50rpx;"></image>
						<view style="width: 380rpx;">
							<u-line-progress :percentage="detail.jgRatio" :showText="false" activeColor='#9390dd'
								height='9'></u-line-progress>
						</view>
						<view style="font-size: 24rpx;text-align: center;margin:10rpx;color:#9390dd;width: 140rpx;">
							{{detail.jgMakeNum}} / {{detail.jgPeople}}
						</view>
					</view>
				</view>
			</view>
			<view style="background-color: #fff;margin-top: 20rpx;">
				<view style="padding: 20rpx 20rpx 180rpx 20rpx;color: #000;margin-top: 20rpx;">
					<view style="display: flex;align-items: center;margin-bottom: 40rpx;">
						<view
							style="width: 8rpx;background-color: #3277fc;border-radius: 10rpx;margin-right: 10rpx;height: 28rpx;">
						</view>
						<view style="font-size: 30rpx;font-weight: 700;">会议详情</view>
					</view>
					<view style="min-height: 200rpx;">
						<u-parse :content="detail.detail" :domain="domain" :lazyLoad="true"></u-parse>
					</view>
				</view>
			</view>

			<view class="u-flex footer" style="padding:10rpx 20rpx 70rpx 20rpx;background-color:#fff;font-size: 22rpx;">
				<view class="u-flex u-row-between p-l-20 ">
					<view @click="callphone(detail.phone)" style="text-align: center;margin-right:60rpx;">
						<u-icon name="phone" color="#000" size="22" label='电话' labelPos='bottom' labelSize='11'
							labelColor='#000'></u-icon>
					</view>
					<button open-type="contact">
						<u-icon name="kefu-ermai" color="#000" size="22" label='客服' labelPos='bottom' labelSize='11'
							labelColor='#000'></u-icon>
					</button>
				</view>
				<view style="width: 400rpx;margin-left: 120rpx;">
					<view v-if="detail.isMake!=null">
						<u-button color='red' text="报名" :customStyle='style' v-if="detail.isMake==1&detail.statue==0"
							@click="goCard(`/pages/sub/store/application?orderId=${detail.orderId}&Id=${detail.id}&suid=${suid}`)"></u-button>
						<u-button color='green' text="已报名" :customStyle='style'
							v-if="detail.isMake==0&detail.statue==0"></u-button>
						<u-button color='#87d0ea' text="活动中" :customStyle='style' v-if="detail.statue==1"></u-button>
						<u-button color='#b7c3c7' text="已结束" :customStyle='style' v-if="detail.statue==2"></u-button>
					</view>
					<view v-else>
						<u-button color='red' text="报名" :customStyle='style'
							@click="goCard(`/pages/sub/store/application?orderId=${detail.orderId}&Id=${detail.id}&suid=${suid}`)"></u-button>
					</view>
				</view>
			</view>
			<view class="share-pro">
				<view class="share-pro-mask" v-if="deliveryFlag"></view>
				<view class="share-pro-dialog" :class="deliveryFlag ? 'open' : 'close'">
					<view class="close-btn" @tap="handleClose">
						<u-icon name="close" size="40rpx" />
					</view>
					<view class="share-pro-title">分享</view>
					<view class="share-pro-body">
						<view class="share-item">

						</view>
						<view class="share-item">
							<button @tap="copyText(detail.shortLink)">
								<view class="u-flex u-row-center">
									<image src="/static/images/link.png" style="width: 80rpx;height: 80rpx;">
								</view>
								<view style="margin-top: 10rpx;">分享链接</view>
							</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		goNav
	} from '@/lib/Comment.js'
	import navbar from '@/components/baseNavbar.vue'
	import sinBarrage from '@/components/sin-barrage/sin-barrage.vue'
	import mswiper from '@/components/swiperList.vue'
	import {
		getDetail,
		cancelCollection,
		collection
	} from "@/api/make.js"
	export default {
		components: {
			navbar,
			mswiper,
			sinBarrage 
		},
		data() {
			return {
				style: {
					borderRadius: '40rpx'
				},
				id: '',
				suid:'',
				coll: false,
				drShow: false,
				tzShow: false,
				sjShow: false,
				jgShow: false,
				info: {},
				deliveryFlag: false,
				detail: {},
				latitude: '',
				longitude: '',
				
				bottom:5,
				left: 35,
				color: '#FFFFFF',
				msec: 2000,
			}
		},
		computed: {

		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: this.detail.storeName,
				path: 'pages/sub/store/detail?id=' + this.id+'&suid='+this.suid,
				desc: this.detail.msg
			}
		},
		onShareTimeline() {
			return {
				title: this.detail.storeName,
				path: 'pages/sub/store/detail?id=' + this.id+'&suid='+this.suid,
				desc: this.detail.msg
			}
		},
		onLoad(option) {
			if(option.suid){
				this.suid = option.suid
			}
			if (option.id) {
				this.id = option.id
				getDetail({
					id: this.id
				}).then(res => {
					console.log('1111', res);
					this.detail = res.data
					if (res.data.type.length != 0) {
						res.data.type.forEach(item => {
							if (item == 0) {
								this.drShow = true
							} else if (item == 1) {
								this.sjShow = true
							} else if (item == 2) {
								this.tzShow = true
							} else if (item == 3) {
								this.jgShow = true
							}
						})
					}
					this.coll = res.data.isCollection
					this.info.city = res.data.city
					this.info.province = res.data.province
					this.info.district = res.data.district
					this.info.detail = res.data.address
				})
			}

		},

		onShow() {
			if(!this.suid){
				this.$store.dispatch("USERINFO", true).then((res) => {
					this.suid = res.uid
				});
			}
			if (this.id) {
				getDetail({
					id: this.id
				}).then(res => {
					console.log('1111', res);
					this.detail = res.data
					if (res.data.type.length != 0) {
						res.data.type.forEach(item => {
							if (item == 0) {
								this.drShow = true
							} else if (item == 1) {
								this.sjShow = true
							} else if (item == 2) {
								this.tzShow = true
							} else if (item == 3) {
								this.jgShow = true
							}
						})
					}
					// this.barList=res.data.notifyList
					this.coll = res.data.isCollection
					this.info.city = res.data.city
					this.info.province = res.data.province
					this.info.district = res.data.district
					this.info.detail = res.data.address
				})
			}
		},
		methods: {
			collection() {
				collection({
					oid: this.id
				}).then(res => {
					if (res.code == 200) {
						this.coll = true
						uni.showToast({
							icon: "none",
							title: '收藏成功'
						})
					}
				})
			},
			cancelCollection() {
				cancelCollection({
					oid: this.id
				}).then(res => {
					if (res.code == 200) {
						this.coll = false
						uni.showToast({
							icon: "none",
							title: '取消成功'
						})
					}
				})
			},
			goCard(url, appid) {
				if (appid) {
					uni.navigateToMiniProgram({
						appId: appid,
						path: url,
						envVersion: 'release'
					})
				} else {
					goNav(url)
				}

			},
			openMap(item) {
				this.latitude = Number(item.latitude)
				this.longitude = Number(item.longitude)
				console.log(this.latitude, this.longitude);
				uni.openLocation({
					latitude: this.latitude, //即将传到高德或腾讯地图的终点纬度  必须是数值，字符串无效
					longitude: this.longitude, //即将传到高德或腾讯地图的终点经度  必须是数值，字符串无效
					name: item.name, //即将传到高德或腾讯地图的店铺名称
					address: item.address, //即将传到高德或腾讯地图的详细地址
					scale: 18
				})
				// uni.getFuzzyLocation({
				// 	type: 'gcj02',
				// 	success: function (res) {


				// 	},
				// });

			},
			callphone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone.toString() //仅为示例 this.servicePhone是你要拨打的电话号码
				});
			},
			addProductShare(type) {
				addShare({
					type: type,
					productId: this.productId
				}).then(res => {

				})
			},
			copyText(value) {
				uni.setClipboardData({
					data: value, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: "复制成功",
							icon: 'none'
						})
						this.addProductShare(1)
					}
				});
			},
			shareEvn(type) {
				console.log('111111111111111');
				uni.pageScrollTo({
					scrollTop: 0,
				});
				this.deliveryFlag = true
			},
			/**
			 * @description: 关闭分享弹窗
			 * @param {type}
			 * @return {type}
			 * @author: hch
			 */
			handleClose() {
				this.deliveryFlag = false
			},
			shareAppMessage() {

			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #f5f5f5;

	}
</style>
<style scoped lang="scss">
	/* 按钮去掉边框 */
	button::after {
		border: none;
	}

	.flex {
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.w {
		width: 40%;
		margin: 0 auto;
	}

	button {
		height: auto; //支付宝需要加
		padding-right: 0;
		padding-left: 0;
		margin-right: 0;
		margin-left: 0;
		font-size: 28rpx;
		line-height: 1;
		color: #1c1c1c;
		background: none;
		border: none; //支付宝需要加
	}

	.button-hover {
		color: #1c1c1c;
		background: none;
	}

	.share-btn {
		padding: 30rpx 60rpx;
		color: $uni-text-color-inverse;
		background-color: $uni-btn-color;
	}

	.share-pro {
		z-index: 5;
		display: flex;
		line-height: 1;
		box-sizing: border-box;
		align-items: center;
		justify-content: flex-end;
		flex-direction: column;

		.share-pro-mask {
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.5);
		}

		.share-pro-dialog {
			position: relative;
			position: fixed;
			bottom: 0;
			width: 750rpx;
			height: 310rpx;
			overflow: hidden;
			background-color: #fff;
			border-radius: 24rpx 24rpx 0 0;
			box-sizing: border-box;

			.close-btn {
				position: absolute;
				top: 0rpx;
				right: 29rpx;
				padding: 20rpx 15rpx;
			}

			.share-pro-title {
				padding: 28rpx 41rpx;
				font-size: 28rpx;
				color: #1c1c1c;
				background-color: #f7f7f7;
			}

			.share-pro-body {
				display: flex;
				font-size: 28rpx;
				color: #1c1c1c;
				flex-direction: row;
				justify-content: space-around;

				.share-item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					justify-content: space-around;
					width: 200rpx;
					text-align: center;
					align-items: center;
					margin-top: 30rpx;
				}
			}
		}

		/* 显示或关闭内容时动画 */

		.open {
			transform: translateY(0);
			transition: all 0.3s ease-out;
		}

		.close {
			transform: translateY(310rpx);
			transition: all 0.3s ease-out;
		}
	}
</style>